<template>
    <div id="app">
        <!--渲染页面的标签-->
        <router-view></router-view>

        <footer>
            <router-link to="/home" class="home"><i class="home"></i><br/>首页</router-link>
            <router-link to="/nine" class="sale" ><i class="sale"></i><br/>9块9</router-link>
            <router-link to="/list" class="list"><i class="list"></i><br/>分类</router-link>
            <router-link to="/mine" class="mine" ><i class="mine"></i><br/>我的</router-link>
        </footer>

        <div class="ad" v-if="flag">
            <span @click="del()"></span>
            <img src="./assets/images/logo.png" alt="">
            <p>0元抽iphone6s,100件宝贝1分领</p>
            <a href="#">下载APP<br/>立领12元</a>
        </div>

    </div>
</template>

<script>
    export default {
        data () {
            return {
                flag: true
            };
        },
        methods: {
            del () {
                this.flag = false;
            }
        }
    }
</script>

<style scoped>
    #app footer{
        width: 100%;
        height: 3.83rem;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
        display: flex;
        justify-content: space-around;
    }
    #app footer a{
        display: inline-block;
        width: 6.42rem;
        text-align: center;
        line-height: 1.17rem;
        font-size: .7rem;
        font-weight: 400;
        color: #999;
    }
    #app footer a i{
        display: inline-block;
        width: 23px;
        height: 21px;
        margin-top: .42rem;
    }
    #app footer a .home{
        background: url(./assets/images/footer-icon.png) 0 0/160px auto no-repeat;
    }
    #app footer a .sale{
        background: url(./assets/images/footer-icon.png) -73px 0/160px auto no-repeat;
    }
    #app footer a .list{
        background: url(./assets/images/footer-icon.png) -25px 0/160px auto no-repeat;
    }
    #app footer a .mine{
        background: url(./assets/images/footer-icon.png) -50px 0/160px auto no-repeat;
    }
    #app footer .router-link-active i{
        background-position-Y: -26px !important;
    }
    #app footer .router-link-active{
        color: #FF0040 !important;
    }

    #app .ad{
        width: 100%;
        height: 4rem;
        padding: 3px 0;
        position: fixed;
        bottom: 46px;
        left: 0;
        z-index: 10;
        background: rgba(0,0,0,.6);
        display: flex;
    }
    #app .ad span{
        width: 20px;
        height: 20px;
        margin: auto 5px auto 3px;
        background: url(assets/images/del.png) 0 0 / 100% no-repeat;
    }
    #app .ad img{
        width: 40px;
        height: 40px;
        margin: auto 5px auto 0;
    }
    #app .ad p{
        width: 13.33rem;
        height: 32px;
        color: #FFF;
        line-height: 16px;
        margin: auto 0;
    }
    #app .ad a{
        text-align: center;
        color: #FFF;
        border-radius: 5px;
        width: 62px;
        height: 28px;
        line-height: 14px;
        font-size: 12px;
        padding: 2px 0 2px 18px;
        margin: auto 5px auto 5px;
        background: url(assets/images/download.png) 8px center / 16px 18px no-repeat;
        background-color: #77ae00;
    }
</style>
